<template>
	<view>
		<view class="tab-content">
			<scroll-view 
				scroll-y="true" 
				class="left-scroll"
				:scroll-into-view="scrollIntoLeftView"
				scroll-with-animation>
				<view
					class="left-item" 
					:class="{active: item.id === catId}"
					@click="handleLeftTab(item)"
					v-for="item in list"
					:key="item.id"
					:id="'left-' + item.id">
					{{item.name}}
					{{item.id}}
				</view>
			</scroll-view>
			<scroll-view 
			scroll-y="true" 
			class="right-scroll"
			@scroll="handleRightScroll"
			:scroll-into-view="scrollIntoRightView"
			scroll-with-animation>
				<view 
				class="right-item"
				v-for="item in list"
				:key="item.id"
				 :id="'right-' + item.id">
					<view class="right-head">{{item.name}}{{item.id}}</view>
					<view class="item-list">
						<view 
						class="ele"
						v-for="ele in item.list"
						:key="ele.id">
							{{ele.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onReady } from '@dcloudio/uni-app'
	const catId = ref(1)
	const list = ref([])
	//定义右侧列表分类标题高度
	const catHeight = uni.upx2px(100)
	//定义右侧列表每一项高度
	const eleHeight = uni.upx2px(100)
	const ele = {
		id: 0,
		name: '分类',
		image: '',
		num: '',
		list: []
	}
	for(let i = 0;i<30;i++) {
		ele.list.push({
			id: i + 1,
			name: '选项',
			image: '',
			num: '',
		})
	}
	
	//在这里循环列表
	for(let i = 0;i<30;i++) {
		const xx = JSON.parse(JSON.stringify(ele))
		xx.id = i + 1
		list.value.push(xx)
	}
	let heightList = []
	onReady(() => {
		getNodeView()
	})
	//定义右侧滚动ID
	const scrollIntoRightView = ref('')
	function handleLeftTab(e) {
		catId.value = e.id
		scrollIntoRightView.value = 'right-' + catId.value
	}
	
	//定义左侧滚动ID
	const scrollIntoLeftView = ref('')
	const handleRightScroll = debounce((e) => {
		let scrollTop = e.detail.scrollTop
		for(let item of heightList) {
			if (scrollTop >= item.top && scrollTop < item.bottom) {
				let itemId = item.id.split('-')[1]
				if (itemId == catId.value) return
				scrollIntoLeftView.value = 'left-' + itemId
				catId.value = parseInt(itemId)
			}
		}
	}, 50)
	
	// 防抖函数
	function debounce(fn, delay) {
		let timer = null
		return function (...args) {
			if (timer) clearTimeout(timer)
			timer = setTimeout(() => fn.apply(this, args), delay)
		}
	}
	
	function getNodeView() {
		uni.createSelectorQuery()
		.selectAll('.right-item')
		.boundingClientRect((res) => {
			heightList = res
		})
		.exec();
	}
	
</script>

<style scoped lang="scss">
scroll-view {
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
}
.tab-content {
	display: flex;
	/*  #ifdef  H5  */
	height: calc(100vh - 44px);
	height: calc(100vh - 44px - constant(safe-area-inset-top));
	height: calc(100vh - 44px - env(safe-area-inset-top));
	/*  #endif  */
	/*  #ifdef  MP-WEIXIN  */
	height: calc(100vh);
	height: calc(100vh - constant(safe-area-inset-top));
	height: calc(100vh - env(safe-area-inset-top));
	/*  #endif  */
}
.left-scroll {
	width: 200rpx;
	.left-item {
		text-align: center;
		padding: 20rpx 0;
		&.active {
			background-color: #efefef;
		}
	}
}
.right-scroll {
	flex: 1;
	width: 200rpx;
	background-color: #efefef;
	.right-item {
		.right-head {
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 20rpx;
			background-color: #666666;
		}
		.item-list {
			.ele {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 20rpx;
			}
		}
	}
}
</style>
